<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="el-icon-document">待办任务</span>
        <el-tag style="margin-left:10px">发起人:{{ startUser }}</el-tag>
        <el-tag>任务节点:{{ taskName }}</el-tag>
        <el-button style="float: right;" size="small" type="danger" @click="goBack">关闭</el-button>
      </div>
      <el-tabs tab-position="top" v-model="activeName" @tab-click="handleClick">
        <!--表单信息-->
        <el-tab-pane label="表单信息" name="1">
          <el-col :span="16" :offset="4">
            <!-- <v-form-render ref="vFormRef"/> -->
             <ProcessInstanceTimeline :activity-nodes="activityNodes" />
            <div style="margin-left:10%;margin-bottom: 20px;font-size: 14px;">
              <el-button type="primary" @click="handleComplete">审 批</el-button>
               <el-button type="primary" @click="handleReturn">退回</el-button>
               <el-button type="primary" @click="handleReject">驳回</el-button>
            </div>
          </el-col>
        </el-tab-pane>

        <!--流程流转记录-->
        <el-tab-pane label="流转记录" name="2">

             <el-table :data="taskList" border header-cell-class-name="table-header-gray">
    <el-table-column label="审批节点" prop="name" min-width="120" align="center" />
    <el-table-column label="审批人" min-width="100" align="center">
      <template #default="scope">
        {{ scope.row.assigneeUser?.userName || scope.row.ownerUser?.userName }}
      </template>
    </el-table-column>
    <el-table-column
      :formatter="dateFormatter"
      align="center"
      label="开始时间"
      prop="createTime"
      min-width="140"
    />
    <el-table-column
      :formatter="dateFormatter"
      align="center"
      label="结束时间"
      prop="endTime"
      min-width="140"
    />
    <el-table-column align="center" label="审批状态" prop="status" min-width="90">
      <template #default="scope">
        <dict-tag :options="bpm_task_status" :value="scope.row.status" />
      </template>
    </el-table-column>
    <el-table-column align="center" label="审批建议" prop="reason" min-width="200">
      <template #default="scope">
        {{ scope.row.reason }}
        <el-button
          class="ml-10px"
          size="small"
          v-if="scope.row.formId > 0"
          @click="handleFormDetail(scope.row)"
        >
          查看表单
        </el-button>
      </template>
    </el-table-column>
    <el-table-column align="center" label="耗时" prop="durationInMillis" min-width="100">
      <template #default="scope">
        {{ formatPast2(scope.row.durationInMillis) }}
      </template>
    </el-table-column>
  </el-table>
          <!--flowRecordList-->
         
        </el-tab-pane>
        <!--流程图-->
        <el-tab-pane label="流程图" name="3">
          <!-- <bpmn-viewer :flowData="flowData" :procInsId="taskForm.procInsId"/> -->
          <ProcessInstanceBpmnViewer
                :loading="processInstanceLoading"
                :model-view="processModelView"
              />
        </el-tab-pane>
      </el-tabs>
      <!--审批任务-->
      <el-dialog :title="completeTitle" v-model="completeOpen" width="60%" append-to-body>
        <el-form ref="taskFormRef" :model="taskForm">
          <el-form-item prop="targetKey">
            <flow-user v-if="checkSendUser" :checkType="checkType" @handleUserSelect="handleUserSelect"></flow-user>
            <flow-role v-if="checkSendRole" @handleRoleSelect="handleRoleSelect"></flow-role>
          </el-form-item>
          <el-form-item label="处理意见" label-width="80px" prop="comment"
                        :rules="[{ required: true, message: '请输入处理意见', trigger: 'blur' }]">
            <el-input type="textarea" v-model="taskForm.comment" placeholder="请输入处理意见"/>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="completeOpen = false">取 消</el-button>
          <el-button type="primary" @click="taskComplete">确 定</el-button>
        </span>
      </el-dialog>
      <!--退回流程-->
      <el-dialog :title="returnTitle" v-model="returnOpen" width="40%" append-to-body>
        <el-form ref="taskFormRef" :model="taskForm" label-width="80px">
          <el-form-item label="退回节点" prop="targetKey">
            <el-radio-group v-model="taskForm.targetKey">
              <el-radio-button
                v-for="item in returnTaskList"
                :key="item.id"
                :value ="item.id"
              >{{ item.name }}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="退回意见" prop="comment"
                        :rules="[{ required: true, message: '请输入意见', trigger: 'blur' }]">
            <el-input style="width: 50%" type="textarea" v-model="taskForm.comment" placeholder="请输入意见"/>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
              <el-button @click="returnOpen = false">取 消</el-button>
              <el-button type="primary" @click="taskReturn">确 定</el-button>
          </span>
      </el-dialog>
      <!--驳回流程-->
      <el-dialog :title="rejectTitle" v-model="rejectOpen" width="40%" append-to-body>
        <el-form ref="rejectTaskFormref" :model="taskForm" label-width="80px">
          <el-form-item label="驳回意见" prop="comment"
                        :rules="[{ required: true, message: '请输入意见', trigger: 'blur' }]">
            <el-input style="width: 50%" type="textarea" v-model="taskForm.comment" placeholder="请输入意见"/>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="rejectOpen = false">取 消</el-button>
            <el-button type="primary" @click="taskReject">确 定</el-button>
          </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup  name="Record">

import {flowRecord} from "@/api/flowable/finished";
import FlowUser from '@/components/flow/User'
import FlowRole from '@/components/flow/Role'
import {flowXmlAndNode} from "@/api/flowable/definition";
import ProcessInstanceTimeline from '../../../processInstance/detail/ProcessInstanceTimeline';
import ProcessInstanceBpmnViewer from '../../../processInstance/detail/ProcessInstanceBpmnViewer.vue'
import { dateFormatter, formatPast2 } from '@/utils/formatTime'
import {
  rejectTaskyudao,
  complete,
  rejectTask,
  returnList,
  returnTask,
  returnTaskyudao,
  getTaskListByReturn,
  getNextFlowNode,
  delegate,
  flowTaskForm,
  approveTask,
  getTaskListByProcessInstanceId,
   todoList,
} from "@/api/flowable/todo";
import {getApprovalDetail,getProcessInstanceBpmnModelView} from "@/api/flowable/instance";
import BpmnViewer from '@/components/Process/viewer';
//import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import 'vue3-treeselect/dist/vue3-treeselect.css'


      const { proxy } = getCurrentInstance();
      const route = useRoute();
      const taskList= ref([]);//流程任务的数组
      const eventName= ref("click")
      // 流程数据
      const flowData= ref({})
      const activeName= ref('1')
      // 遮罩层
      const loading= ref(true)
       const processModelView = ref({})
    const processInstanceLoading = ref(false)
      const flowRecordList= ref([]) // 流程流转数据
      const rules= ref({}) // 表单校验
      const taskForm= reactive({
        returnTaskShow: false, // 是否展示回退表单
        delegateTaskShow: false, // 是否展示回退表单
        defaultTaskShow: true, // 默认处理
        comment: "", // 意见内容
        procInsId: "", // 流程实例编号
        instanceId: "", // 流程实例编号
        deployId: "",  // 流程定义编号
        taskId: "",// 流程任务编号
        procDefId: "",  // 流程编号
        targetKey: "",
        variables: {},
        id:"",
        reason:"",
        targetTaskDefinitionKey:"",
      });
        const queryParams=reactive( {
      pageNum: 1,
      pageSize: 10,
      procInsId:'',
    })
   const returnTaskList= ref([]) // 回退列表数据
   const completeTitle= ref(null)
   const completeOpen= ref(false)
   const returnTitle= ref(null)
   const  returnOpen= ref(false)
   const rejectOpen= ref(false)
   const rejectTitle= ref(null)
   const checkSendUser= ref(false) // 是否展示人员选择模块
   const checkSendRole= ref(false)// 是否展示角色选择模块
   const checkType= ref('single') // 选择类型
   const taskName= ref(null) // 任务节点
   const startUser= ref(null) // 发起人信息,
   const multiInstanceVars= ref('') // 会签节点
   const formJson=ref({})
   const  activityNodes=ref([]);
  const { bpm_task_status } = proxy.useDict("bpm_task_status");

 function created() {
    if ( route.query) {
    // 流程任务重获取变量表单
   // ApprovalDetail(taskForm.procInsId, taskForm.deployId)
      taskName.value = route.query.taskName;
      startUser.value = route.query.startUser;
      taskForm.deployId =  route.query.deployId;
      taskForm.taskId  = route.query.taskId;
      taskForm.id=route.query.taskId;
      taskForm.procInsId = route.query.procInsId;
      taskForm.executionId = route.query.executionId;
      taskForm.instanceId = route.query.procInsId;
     
      // 流程任务获取变量信息
      if (taskForm.taskId) {
       // this.getFlowTaskForm(this.taskForm.taskId);
      }
     // this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId);
       TaskListByProcessInstanceId(taskForm.procInsId);
        ApprovalDetail(taskForm.procInsId, taskForm.deployId)
        getList()
    }
  };
    function ApprovalDetail(procInsId, deployId) {
     
      const params = {processInstanceId: procInsId, deployId: deployId}
      getApprovalDetail(params).then(res => {
        activityNodes.value=res.data.activityNodes
        console.log("getApprovalDetail",activityNodes.value)
      }).catch(res => {
        this.goBack();
      })
    }
   function handleClick(tab, event) {
      if (tab.props.name === '3') {
         getProcessInstanceBpmnModelView(taskForm.procInsId).then(res=>{
        processModelView.value = res.data;
        console.log("www",processModelView)
      })
      }
    }
  function  setIcon(val) {
      if (val) {
        return "el-icon-check";
      } else {
        return "el-icon-time";
      }
    }
  function  setColor(val) {
      if (val) {
        return "#2bc418";
      } else {
        return "#b3bdbb";
      }
    }
    // 用户信息选中数据
  function  handleUserSelect(selection) {
      if (selection) {
        if (selection instanceof Array) {
          const selectVal = selection.map(item => item.userId.toString());
          if (this.multiInstanceVars) {
            this.$set(this.taskForm.variables, this.multiInstanceVars,  selectVal);
          } else {
            this.$set(this.taskForm.variables, "approval", selectVal.join(','));
          }
        } else {
          this.$set(this.taskForm.variables, "approval", selection.userId.toString());
        }
      }
    }
    // 角色信息选中数据
  function  handleRoleSelect(selection, roleName) {
      if (selection) {
        if (selection instanceof Array) {
          const selectVal = selection.map(item => item.roleId.toString());
          this.$set(this.taskForm.variables, "approval", selectVal.join(','));
        } else {
          this.$set(this.taskForm.variables, "approval", selection);
        }
      }
    }
    /** 流程流转记录 */
  function  getFlowRecordList(procInsId, deployId) {
      
      const params = {procInsId: procInsId, deployId: deployId}
      flowRecord(params).then(res => {
        flowRecordList.value = res.data.flowList;
      }).catch(res => {
        goBack();
      })
    }
        //流程任务的数组
   function  TaskListByProcessInstanceId(procInsId) {
      getTaskListByProcessInstanceId(procInsId).then(res => {
       
        taskList.value = res.data;
        
      }).catch(res => {
        goBack();
      })
    }
    /** 流程节点表单 */
  function  getFlowTaskForm(taskId) {
      if (taskId) {
        // 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
        flowTaskForm({taskId: taskId}).then(res => {
          // 回显表单
          this.$refs.vFormRef.setFormJson(res.data.formJson);
          this.formJson = res.data.formJson;
          this.$nextTick(() => {
            // 加载表单填写的数据
            this.$refs.vFormRef.setFormData(res.data);
            // this.$nextTick(() => {
            //   // 表单禁用
            //   this.$refs.vFormRef.disableForm();
            // })
          })
        });
      }
    }

    /** 委派任务 */
  function  handleDelegate() {
      taskForm.delegateTaskShow.value = true;
      taskForm.defaultTaskShow.value = false;
    }
  function  handleAssign() {

    }
    /** 返回页面 */
 function   goBack() {
      // 关闭当前标签页并返回上个页面
      const obj = { path: "/task/todo", query: { t: Date.now()} };
      proxy.$tab.closeOpenPage(obj);
    }
    /** 驳回任务 */
 function   handleReject() {
      rejectOpen.value = true;
      rejectTitle.value = "驳回流程";
    }
    /** 驳回任务 */
  function  taskReject() {
     taskForm.id=taskForm.taskId;
      taskForm.reason=taskForm.comment;
      proxy.$refs["rejectTaskFormref"].validate(valid => {
        
        if (valid) {
          rejectTaskyudao(taskForm).then(res => {
            proxy.$modal.msgSuccess(res.msg);
            goBack();
          });
        }
      });
    }
    /** 可退回任务列表 */
 function   handleReturn() {
      returnOpen.value = true;
      returnTitle.value = "退回流程";
      returnList(taskForm).then(res => {
        returnTaskList.value = res.data;
      })

      // getTaskListByReturn({taskId:taskForm.taskId}).then(res=>{
      //   console.log(res)
      // })
      
    }
    /** 提交退回任务 */
 function   taskReturn() {
      proxy.$refs["taskFormRef"].validate(valid => {
        if (valid) {
          taskForm.reason=taskForm.comment
          taskForm.targetTaskDefinitionKey=taskForm.targetKey
          // returnTask(taskForm).then(res => {
          //   proxy.$modal.msgSuccess(res.msg);
          //   goBack()
          // });
            returnTaskyudao(taskForm).then(res => {
            proxy.$modal.msgSuccess(res.msg);
            goBack()
          });
        }
      });
    }

    /** 取消回退任务按钮 */
  function  cancelTask() {
      taskForm.returnTaskShow = false;
      taskForm.defaultTaskShow = true;
      returnTaskList.val =ref([]);
    }
    /** 委派任务 */
  function  submitDeleteTask() {
      proxy.$refs["taskForm"].validate(valid => {
        if (valid) {
          delegate(taskForm).then(response => {
            proxy.$modal.msgSuccess(response.msg);
            goBack();
          });
        }
      });
    }
    /** 取消回退任务按钮 */
 function   cancelDelegateTask() {
      taskForm.delegateTaskShow = false;
      taskForm.defaultTaskShow = true;
      returnTaskList = ref([]);
    }
    /** 加载审批任务弹框 */
 function   handleComplete() {
      completeOpen.value = true;
    completeTitle.value = "流程审批";
      submitForm();
    }
    /** 用户审批任务 */
 function   taskComplete() {
       taskForm.id=taskForm.taskId;
       taskForm.reason=taskForm.comment;
      if (!taskForm.variables && checkSendUser.value) {
        proxy.$modal.msgError("请选择流程接收人员!");
        return;
      }
      if (!taskForm.variables && checkSendRole.value) {
        proxy.$modal.msgError("请选择流程接收角色组!");
        return;
      }
      if (!taskForm.comment) {
        proxy.$modal.msgError("请输入审批意见!");
        return;
      }
      if (taskForm) {
       
        // complete(this.taskForm).then(response => {
        //   this.$modal.msgSuccess(response.msg);
        //   this.goBack();
        // });
          approveTask(taskForm).then(response => {
          proxy.$modal.msgSuccess(response.msg);
          goBack();
        });
      } else {
        // complete(this.taskForm).then(response => {
        //   this.$modal.msgSuccess(response.msg);
        //   this.goBack();
        // });
          approveTask(taskForm).then(response => {
          proxy.$modal.msgSuccess(response.msg);
          goBack();
        });
      }
    }
    /** 申请流程表单数据提交 */
 function   submitForm() {
      // 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
      const params = {taskId: taskForm.taskId}
      getNextFlowNode(params).then(res => {
        // proxy.$refs.vFormRef.getFormData().then(formData => {
        //   // Object.assign(this.taskForm.variables, formData);
        //   // this.taskForm.variables.formJson = this.formJson;
        //   // console.log(this.taskForm, "流程审批提交表单数据1")
        // }).catch(error => {
        //   // this.$modal.msgError(error)
        // })
        const data = res.data;
        // if (data) {
        //   if (data.dataType === 'dynamic') {
        //     if (data.type === 'assignee') { // 指定人员
        //       checkSendUser.value = true;
        //       checkType.value = "single";
        //     } else if (data.type === 'candidateUsers') {  // 候选人员(多个)
        //       checkSendUser.value = true;
        //       checkType.value = "multiple";
        //     } else if (data.type === 'candidateGroups') { // 指定组(所属角色接收任务)
        //       checkSendRole.value = true;
        //     } else { // 会签
        //       // 流程设计指定的 elementVariable 作为会签人员列表
        //       multiInstanceVars.value = data.vars;
        //       checkSendUser.value = true;
        //       checkType.value = "multiple";
        //     }
        //   }
        // }
      })
    }
    // 动态绑定操作按钮的点击事件
 function   handleButtonClick(method) {
      this[method]();
    }
    function  getList() {
      queryParams.procInsId= route.query.procInsId;
      todoList(queryParams).then(res => {
         console.log("根据流程实例id获取当前任务",res)
      });
    }
 created()
</script>
<style lang="scss" scoped>
.test-form {
  margin: 15px auto;
  width: 800px;
  padding: 15px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 100%;
  margin-bottom: 20px;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.my-label {
  background: #E1F3D8;
}
</style>
